<template>
    <div>
        <h1>Welcome to Tauri + Vue</h1>
        <div class="row">
            <a href="https://vitejs.dev" target="_blank">
            <img src="/vite.svg" class="logo vite" alt="Vite logo" />
            </a>
            <a href="https://tauri.app" target="_blank">
            <img src="/tauri.svg" class="logo tauri" alt="Tauri logo" />
            </a>
            <a href="https://vuejs.org/" target="_blank">
            <img src="../assets/vue.svg" class="logo vue" alt="Vue logo" />
            </a>
        </div>
        <p class="center-align">Click on the Tauri, Vite, and Vue logos to learn more.</p>
        <form class="row" @submit.prevent="greet">
            <input id="greet-input" v-model="name" placeholder="Enter a name..." />
            <button type="submit">Greet To</button>
        </form>
        <p>{{ greetMsg }}</p>
    </div>   
</template>

<script setup lang="ts">
import { ref } from "vue";
import { invoke } from "@tauri-apps/api/core";

const greetMsg = ref("");
const name = ref("");

async function greet() {
  // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
  greetMsg.value = await invoke("greet", { name: name.value });
}

</script>
<style lang="scss" scoped>
  @use "../assets/common.scss";
  @use "../assets/home.scss";
</style>